<template>
  <div>
    <div>
      <head-top></head-top>
    </div>
    <div class="item_center">
      <el-row style="width: 1200px;" :gutter="20">
        <el-col :span="3">
          <el-image :src="require('@/assets/website_logo.png')" style="height: 80px" @click="goHome"></el-image>
        </el-col>
        <el-col :span="4">
          <h1 style="color: #098CC0">欢迎登录</h1>
        </el-col>
      </el-row>
    </div>
    <div class="item_center">
      <div class="bj">
        <!--        登录盒子-->
        <div class="from_fbox" v-if="!trigger">
          <div class="from_box">
            <div class="title_class">
              <span style="font-size: 30px; color: #098CC0">登录</span>
            </div>
            <el-form  label-width="70" :model="loginData" ref="loginRef" :rules="loginrules">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="loginData.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="loginData.password"></el-input>
              </el-form-item>
            </el-form>
            <div style="display: flex;justify-content: end">
              <router-link to="/reset-password">忘记密码？</router-link>
            </div>
            <div style="display: flex;justify-content: end;margin-top: 10px" @click="trigger=true">
              <el-text class="mx-1" type="danger" size="large">没有账号？快注册一个吧</el-text>
            </div>
            <div style="margin-top: 20px;display: flex;justify-content: center ">
              <button @click="login(loginRef)" class="login_btn">登录</button>
            </div>
          </div>
        </div>
        <!--  注册盒子-->
        <div class="from_fbox" v-else>
          <div class="from_box">
            <div class="title_class">
              <span style="font-size: 30px;">注册</span>
            </div>
            <el-form size="large" label-width="70" :model="enrollData" ref="enrollRef" :rules="enrollrules">
              <el-form-item label="用户名" prop="userName">
                <el-input v-model="enrollData.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="enrollData.password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="password2">
                <el-input type="password" v-model="enrollData.password2"></el-input>
              </el-form-item>
            </el-form>
            <div style="display: flex;justify-content: end;margin-top: 10px" @click="trigger=false">
              <el-text class="mx-1" type="danger" size="large">已有账号？快去登录吧</el-text>
            </div>
            <div style="margin-top: 20px;display: flex;justify-content: center ">
              <button @click="enroll(enrollRef)" class="login_btn">注册</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="item_center" style="margin-top: 10px">
      <div class="box_size">
        <el-row>
          <el-col :offset="5" :span="3">
            商家入驻
          </el-col>
          <el-col :span="3">
            批发采购
          </el-col>
          <el-col :span="3">
            帮助中心
          </el-col>
          <el-col :span="3">
            反馈
          </el-col>
          <el-col :span="3">
            <el-icon><Iphone /></el-icon>
            app下载
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col :offset="10" :span="4">
            重庆工程职业技术学院
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :offset="10" :span="3">
            大数据与物联网学院
          </el-col>
          <el-col  :span="4">
            软件211
          </el-col>
        </el-row>
      </div>
    </div>

  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {enrollApi, loginApi} from '@/api/user'
import {useRouter} from "vue-router";
import {setToken} from '@/util/token/tokenUtil'
import {useCommonStore} from "@/store";
import HeadTop from "@/components/home/HeadTop";
import { ElLoading } from 'element-plus'

let store = useCommonStore()
let router = useRouter()
let loginRef = ref()
let trigger = ref(false)//false表示登录，true表示注册
let loginData = reactive({
  userName: '',
  email: '',
  password: '',
  password2: ''
})

function login(r) {
  /*登录*/
  // 检验状态
  r.validate((v) => {
    if (v) {
      const loading = ElLoading.service({
        lock: true,
        text: '登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      //  校验成功，发送登录请求
      loginApi(loginData).then(res => {
        if (res.code === 200) {
          /*修改层路状态*/
          store.setLoginState(true)
          store.setLoginUser({
            userName:res.data.userName,
            avatar:res.data.avatar,
            userNickname:res.data.userNickname
          })
          /*保存token*/
          setToken("token", res.data.token)
          //返回上一步
          router.go(-1)
        }
      }).finally(()=>{
        loading.close()
      })
    } else return false
  })
}
function goHome(){
  router.push("/")
}

const loginrules = ref({
  userName: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ]
})
let enrollRef = ref()
let enrollData = reactive({
  userName: '',
  password: '',
  password2: ''
})

function enroll(r) {
  /*注册*/
  r.validate(v => {
    if (v) {
      console.log("成功校验")
      enrollApi(enrollData).then(res => {
        if (res.code == 200) {
          //跳转主页面
          router.push('/home')
        }
      })
    } else console.log("校验失败")
  })
}

/*校验规则*/
function validatePass2(rule, value, callback) {
  if (value === '') {
    callback(new Error('请确认密码'))
  } else {
    if (enrollData.password !== value) {
      callback(new Error("输入错误!"))
    }
    callback()
  }
}

let enrollrules = reactive({
  userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  password: [{required: true, message: '请输入密码', trigger: 'blur'},],
  password2: [{validator: validatePass2, trigger: 'blur'}]
})
</script>

<style scoped>
.item_center {
  display: flex;
  justify-content: center;
}

.bj {
  width: 1600px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../assets/login_bj.png") center no-repeat;
  background-size: cover;
}

.from_fbox {
  background-color: white;
  width: 350px;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: switchBox 5s;
  -webkit-animation: switchBox 5s;
}

.from_box {
  margin: 0 auto;
  width: 85%;
}

.box_size {
  width: 1200px;
}

.title_class {
  text-align: center;
  margin-bottom: 40px
}

.login_btn {
  width: 100%;
  height: 35px;
  background-color: #098CC0;
  border-style: none;
  border-radius: 2mm;
}

@keyframes switchBox {
  0% {
    left: -100px;
  }
  100% {
    left: 0;
  }
}
</style>
